<template>
    <div class="ui container">
        <div class="ui secondary pointing menu">
            <a href="javescript: void(0)" @click="tabClickHandler(index)" 
            class="item" :class="$route.name == pathArr[index].split('/').pop() ? 'active': ''" 
            v-for="(item, index) in pathArr" :key="index">{{labelArr[index]}}</a>
        </div>
        <div class="ui basic segment">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>
<script>
export default {
    name: 'tab',
    props: {
        pathArr: Array,
        labelArr: Array
    },
    data () {
        return {
            activeArr: new Array(this.pathArr.length).fill(false)
        }
    },
    mounted () {
        this.$set(this.activeArr, 0, true)
    },
    methods: {
        tabClickHandler (index) {
            this.$router.push({path: this.pathArr[index]})
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>
